<template>
    <div class="boxs">
        <div class="tops">
            <div class="left">
                <div class="cover">
                    <img src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3922.svg" alt="" class="covers">
                    <img src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3923.svg" alt="" class="picture">
                </div>
                <span>智慧物业管理系统</span>
            </div>
            <div class="right">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/__80px_u3929.svg" alt="">
                <span>七尾</span>
            </div>
        </div>
        <div class="bottoms">
            <el-col :span="12">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-submenu index="1">
                    <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>工作台</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="1-1" @click="jumps()">工作台</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3818.svg" alt="">
                    <span>资料管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">小区信息</el-menu-item>
                        <el-menu-item index="2-2" @click="jump()">楼座管理</el-menu-item>
                        <el-menu-item index="2-3" @click="jump1()">房屋管理</el-menu-item>
                        <el-menu-item index="2-4" @click="jump2()">储物室管理</el-menu-item>
                        <el-menu-item index="2-5" @click="jump34()">住户管理</el-menu-item>
                        <el-menu-item index="2-6" @click="jump3()">房屋租赁管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3833.svg" alt="">
                    <span>车行管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="jump4()">区域管理</el-menu-item>
                        <el-menu-item index="3-2" @click="jump6()">车位管理</el-menu-item>
                        <el-menu-item index="3-3" @click="jump7()">车辆管理</el-menu-item>
                        <el-menu-item index="3-4" @click="jump8()">月卡管理</el-menu-item>
                        <el-menu-item index="3-5" @click="jump5()">停车缴费管理</el-menu-item>
                    </el-menu-item-group>
                    
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3847.svg" alt="">
                    <span>物业服务</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">报修管理</el-menu-item>
                        <el-menu-item index="4-2" @click="jump9()">访客管理</el-menu-item>
                        <el-menu-item index="4-3" @click="jump10()">投诉管理</el-menu-item>
                        <el-menu-item index="4-4" @click="jump11()">活动管理</el-menu-item>
                        <el-menu-item index="4-5" @click="jump12()">公告管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3861.svg" alt="">
                    <span>缴费管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">账单管理</el-menu-item>
                        <el-menu-item index="5-2" @click="jump13()">收费项目管理</el-menu-item>
                        <el-menu-item index="5-3" @click="jump14()">抄表周期管理</el-menu-item>
                        <el-menu-item index="5-4">仪表管理</el-menu-item>
                    </el-menu-item-group>
                    
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3903.svg" alt="">
                    <span>巡检巡更</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-1" @click="jump18()">巡更记录</el-menu-item>
                        <el-menu-item index="6-2" @click="jump19()">巡更任务管理</el-menu-item>
                        <el-menu-item index="6-3" @click="jump20()">巡更计划管理</el-menu-item>
                        <el-menu-item index="6-4" @click="jump21()">巡更点管理</el-menu-item>
                        <el-menu-item index="6-5" @click="jump22()">巡更路线管理</el-menu-item>
                        <el-menu-item index="6-6" @click="jump23()">巡更项目管理</el-menu-item>
                        <el-menu-item index="6-7">巡更数据概况</el-menu-item>
                        <el-menu-item index="6-8" @click="jump24()">巡更日报</el-menu-item>
                        <el-menu-item index="6-9" @click="jump25()">巡更周报</el-menu-item>
                        <el-menu-item index="6-10" @click="jump26()">巡更月报</el-menu-item>
                        <el-menu-item index="6-11" @click="jump27()">巡更业务统计</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">
                    <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3874.svg" alt="">
                    <span>设备管理</span>
                    </template>
                        <el-menu-item-group>
                        <el-menu-item index="7-1" @click="jump15()">公共设备管理</el-menu-item>
                        <el-menu-item index="7-2" @click="jump16()">设备分类管理</el-menu-item>
                        <el-menu-item index="7-3" @click="jump17()">设备维修记录</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>设置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="8-1" @click="jump28()">住户标签</el-menu-item>
                        <el-menu-item index="8-2" @click="jump29()">投诉类型</el-menu-item>
                        <el-menu-item index="8-3" @click="jump30()">房屋设施管理</el-menu-item>
                        <el-menu-item index="8-4">Banner图管理</el-menu-item>
                        <el-menu-item index="8-5" @click="jump31()">员工管理</el-menu-item>
                        <el-menu-item index="8-6" @click="jump32()">角色管理</el-menu-item>
                        <el-menu-item index="8-7">消息通知</el-menu-item>
                        <el-menu-item index="8-8" @click="jump33()">操作日志</el-menu-item>
                        <el-menu-item index="8-9">个人信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                </el-menu>
            </el-col>
            <router-view></router-view> 
        </div>        
    </div>
</template>

<script>
export default {
    
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            jump(){
                if(this.$route.name!='information'){
                    this.$router.push({
                        path: '/index/information'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jumps(){
                if(this.$route.name!='main'){
                    this.$router.push({
                        path: '/index/main'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump1(){
                if(this.$route.name!='room'){
                    this.$router.push({
                        path: '/index/room'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump2(){
                if(this.$route.name!='storage'){
                    this.$router.push({
                        path: '/index/storage'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump3(){
                if(this.$route.name!='lease'){
                    this.$router.push({
                        path: '/index/lease'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump4(){
                if(this.$route.name!='region'){
                    this.$router.push({
                        path: '/index/region'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump5(){
                if(this.$route.name!='pay'){
                    this.$router.push({
                        path: '/index/pay'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump6(){
                if(this.$route.name!='lot'){
                    this.$router.push({
                        path: '/index/lot'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump7(){
                if(this.$route.name!='vehicle'){
                    this.$router.push({
                        path: '/index/vehicle'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump8(){
                if(this.$route.name!='card'){
                    this.$router.push({
                        path: '/index/card'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump9(){
                if(this.$route.name!='visitor'){
                    this.$router.push({
                        path: '/index/visitor'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump10(){
                if(this.$route.name!='complaint'){
                    this.$router.push({
                        path: '/index/complaint'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump11(){
                if(this.$route.name!='activity'){
                    this.$router.push({
                        path: '/index/activity'
                    })
                }else{
                    console.log('已进入');
                }
                
            },
            jump12(){
                if(this.$route.name!='notice'){
                    this.$router.push({
                        path: '/index/notice'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump13(){
                if(this.$route.name!='charge'){
                    this.$router.push({
                        path: '/index/charge'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump14(){
                if(this.$route.name!='cycle'){
                    this.$router.push({
                        path: '/index/cycle'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump15(){
                if(this.$route.name!='public'){
                    this.$router.push({
                        path: '/index/public'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump16(){
                if(this.$route.name!='classification'){
                    this.$router.push({
                        path: '/index/classification'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump17(){
                if(this.$route.name!='maintenance'){
                    this.$router.push({
                        path: '/index/maintenance'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump18(){
                if(this.$route.name!='record'){
                    this.$router.push({
                        path: '/index/record'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump19(){
                if(this.$route.name!='mission'){
                    this.$router.push({
                        path: '/index/mission'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump20(){
                if(this.$route.name!='plan'){
                    this.$router.push({
                        path: '/index/plan'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump21(){
                if(this.$route.name!='points'){
                    this.$router.push({
                        path: '/index/points'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump22(){
                if(this.$route.name!='routes'){
                    this.$router.push({
                        path: '/index/routes'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump23(){
                if(this.$route.name!='project'){
                    this.$router.push({
                        path: '/index/project'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump24(){
                if(this.$route.name!='daily'){
                    this.$router.push({
                        path: '/index/daily'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump25(){
                if(this.$route.name!='weekly'){
                    this.$router.push({
                        path: '/index/weekly'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump26(){
                if(this.$route.name!='monthly'){
                    this.$router.push({
                        path: '/index/monthly'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump27(){
                if(this.$route.name!='business'){
                    this.$router.push({
                        path: '/index/business'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump28(){
                if(this.$route.name!='resident'){
                    this.$router.push({
                        path: '/index/resident'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump29(){
                if(this.$route.name!='complain'){
                    this.$router.push({
                        path: '/index/complain'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump30(){
                if(this.$route.name!='facilities'){
                    this.$router.push({
                        path: '/index/facilities'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump31(){
                if(this.$route.name!='staff'){
                    this.$router.push({
                        path: '/index/staff'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump32(){
                if(this.$route.name!='role'){
                    this.$router.push({
                        path: '/index/role'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump33(){
                if(this.$route.name!='log'){
                    this.$router.push({
                        path: '/index/log'
                    })
                }else{
                    console.log('已进入');
                }
            },
            jump34(){
                if(this.$route.name!='household'){
                    this.$router.push({
                        path: '/index/household'
                    })
                }else{
                    console.log('已进入');
                }
            }
            // handleEdit(index, row) {
            //     console.log(index, row);
            // },
            // handleDelete(index, row) {
            //     console.log(index, row);
            // },
            // handleSizeChange(val) {
            //     console.log(`每页 ${val} 条`);
            // },
            // handleCurrentChange(val) {
            //     console.log(`当前页: ${val}`);
            // }
        },
        // mounted(){
        // var chartDom = this.$refs.myChart;
        // var myChart = this.$echarts.init(chartDom);
        // var option;
        // option = {
        //     xAxis: {
        //         type: 'category',
        //         boundaryGap: false,
        //         data: ['04-01', '04-02', '04-03', '04-04', '04-05', '04-06', '04-07']
        //     },
        //     yAxis: {
        //         type: 'value'
        //     },
        //     series: [
        //         {
        //         data: [125, 485, 455, 295, 425, 425, 275],
        //         type: 'line',
        //         areaStyle: {
        //             color: 'rgba(234, 241, 254, 1)'
        //         }
        //         }
        //     ]
        // };
        // option && myChart.setOption(option);
        // },
        // data() {
        //     return {
        //         currentPage1: 5,
        //         currentPage2: 5,
        //         currentPage3: 5,
        //         currentPage4: 4,
        //         tableData: [{
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }, 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }, 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }, 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }
        //         , 
        //         {
        //             date: '01',
        //             name: '王小虎',
        //             type: '业主',
        //             state:"审核中",
        //             idnumber:"371327199698989789",
        //             phone:"15678009866",
        //             room:"A座3单元401",
        //         }],
                
        //         input: '',
        //         textarea: '',
        //         options: [{
        //         value: '选项1',
        //         label: '住户姓名'
        //         }, {
        //         value: '选项2',
        //         label: '手机号码'
        //         }, {
        //         value: '选项3',
        //         label: '证件号码'
        //         }],
        //         value: '',
                
        //     }
        // }
    }
</script>

<style lang="scss" scoped>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.boxs{
    .tops{
        padding: 0 24px;
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: rgba(0, 21, 41, 1);
        .left{
            display: flex;
            align-items: center;
            .cover{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                overflow: hidden;
                position: relative;
                .covers{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .picture{
                    width: 14px;
                    height: 13px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            span{
                margin-left: 8px;
                font-weight: 500;
                font-size: 18px;
                letter-spacing: 1px;
                color: #FFFFFF;
            }
        }
        .right{
            display: flex;
            align-items: center;
            margin-right: 30px;
            img{
                width: 24px;
                height: 24px;
            }
            span{
                margin-left: 8px;
                font-weight: 500;
                font-size: 14px;
                letter-spacing: 1px;
                color: #FFFFFF;
            }
        }
    }
    .el-col.el-col-12{
        width: 216px !important;
        height: 100vh !important;
        background-color: #fff !important;
        // margin-top: 40px !important;
        .el-submenu__title{
            height: 52px !important;
            .ax_default.box_1.selected{
                height: 46px !important;
            }
        }
    }
}
.icon{
    margin-left: 4px;
    width: 15px;
    margin-right: 8px;
}
.bottoms{
    display: flex;
    background-color: rgba(240, 242, 245, 1);
    margin-top: 48px;
    .main{
        margin: 0px;
        background-color: rgba(240, 242, 245, 1);
        background-image: none;
        position: relative;
        left: -24px;
        width: 1136px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        // height: 496px;
        // height: 100vh;
        p{
            font-size: 20px;
            color: rgba(0, 0, 0, 0.847058823529412);
            font-weight: 600;
            margin: 20px 0;
        }
        .num{
            display: flex;
            justify-content: space-between;
            .num-item{
                width: 266px;
                height: 110px;
                background-color: #fff;
                display: flex;
                align-items: center;
                .bgs{
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    background-color: rgba(24, 144, 255, 1);
                    border-radius: 50%;
                    position: relative ;
                    margin-left: 15px;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-two{
                    background-color: rgba(114, 98, 253, 1) !important;
                    border-radius: 50%;
                    position: relative !important;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-three{
                    background-color: rgba(255, 170, 0, 1) !important;
                    border-radius: 50%;
                    position: relative;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                .bgs-four{
                    background-color: rgba(82, 196, 26, 1) !important;
                    border-radius: 50%;
                    position: relative;
                    margin-left: 15px;
                    width: 56px;
                    height: 56px;
                    background: inherit;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 21px;
                        height: 21px;
                    }
                }
                
                .households{
                    margin-left: 15px;
                    p{
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.427450980392157);
                        line-height: 22px;
                        font-size: 14px;
                        margin-top: 0;
                        margin-bottom: 10px;
                    }
                    span{
                        font-weight: 600;
                        color: rgba(0, 0, 0, 1);
                        line-height: 22px;
                        font-size: 30px;
                    }
                }
            }
        }
    }
}
.charts{
    display: flex;
    justify-content: space-between;
    .chart{
        position: relative;
        margin-top: 20px;
        width: 772px;
        height: 397px;
        background-color: rgba(255, 255, 255, 1);
        border-width: 1px;
        border-style: solid;
        border-color: rgba(233, 233, 233, 1);
        .title{
            position: absolute;
            top: -2px;
            left: 47px;
            p{
                font-size: 16px;
                color: rgba(0, 0, 0, 0.847058823529412);
                font-weight: 600;
                
            }
        }
        .echarts{
            width: 772px;
            height: 397px;
        }
    }
    .rights{
        margin-top: 20px;
        .convenient{
            width: 344px;
            height: 179px;
            background-color: rgba(255, 255, 255, 1);
            .texts{
                p{
                    width: 122px;
                    height: 68px;
                    padding: 24px 0 0 24px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 0.847058823529412);
                    font-weight: 500;
                    margin: 0;
                }
                span{
                    margin: 0  0 24px 24px;
                    font-size: 14px;
                    display: inline-block;
                    
                }
            }
        }
        .bottom{
            padding: 24px;
            width: 344px;
            height: 179px;
            margin-top: 37px;
            background-color: rgba(255, 255, 255, 1);
            .texts{
                p{
                    width: 122px;
                    height: 44px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 0.847058823529412);
                    font-weight: 500;
                    margin: 0;
                }
                textarea{
                    outline: none;
                    resize: none;
                    height: 80px;
                    width: 299px;
                    border: 1px solid rgba(233, 233, 233, 1);
                    color: rgba(0, 0, 0, 0.149019607843137);
                    padding: 14px 0 0 20px;
                    font-size: 12px;
                }
            }
        }
    }
}
.footer{
    height: 845px;
    background-color: rgba(255, 255, 255, 1);
    padding: 24px;
    margin-top: 20px;
    .query{
        width: 122px;
        height: 44px;
        margin: 0 !important;
        font-size: 16px !important;
        color: rgba(0, 0, 0, 0.847058823529412) !important;
        font-weight: normal !important;
    }
    .search-box{
        display: flex;
        justify-content: space-between;
        .search{
            display: flex;
            width: 503px;
            align-items: center;
            span{
                display: inline-block;
                width: 60px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-right: 15px;
            }
        }
    }
    
}
.search-btn{
    margin-left: 15px !important;
}
.block{
    margin-top: 40px;
}
.el-select.el-select--mini{
    display: flex;
    justify-content: flex-end !important;
}
</style>